<template>
    <div>
        <div class="header-title">
            <span @click="$router.go(-1)" class="mint-toast-icon mintui mintui-back"></span>
            <span>登录</span>
            <span></span>
        </div>
        <div class="choose-type">
            <span @click="chooseType = 1" :class="[chooseType == 1?'chooseNow':'']">密码登录</span>
            <span @click="chooseType = 2" :class="[chooseType == 2?'chooseNow':'']">验证码登录</span>
        </div>
        <!-- 密码登录 -->
        <div class="login-password" v-show="chooseType==1?true:false">
            <div class="write-line">
                <input type="text" v-model="passwordLogin.accounts" placeholder="邮箱或手机号码" />
            </div>
            <div class="write-line">
                <input type="password" v-model="passwordLogin.password" placeholder="密码" />
                <img src="../../assets/img/bukejian.png" alt />
            </div>
            <mt-button @click="login" size="normal" class="submit-btn">登录</mt-button>
            <div class="forget">
                <span @click="$router.push({name:'register'})">立即注册</span>
                <span
                    @click="$router.push({name:'safetyVerificationCode',query:{urlAddress:'changeSetPassword',titleType:'1'}})"
                >忘记密码？</span>
            </div>
        </div>
        <!-- 验证码登录 -->
        <div class="login-code login-password" v-show="chooseType==2?true:false">
            <div class="input-area">
                <div @click="areaPage = true">
                    <span>手机</span>
                    <span>+{{phoneArea}}</span>
                    <span class="fa fa-angle-down"></span>
                </div>
                <input v-model="securityCode.accounts" type="text" name id placeholder="请输入手机号" />
            </div>
            <!-- <div class="write-line">
                <input type="text" placeholder="请输入右侧图形验证码" />
            </div>-->
            <div class="write-line">
                <input v-model="securityCode.code" type="text" placeholder="短信验证码" />
                <span @click="getCodeFather">
                    <sendPhoneCode :phoneArea="phoneArea" :phone="securityCode.accounts" ref="childCode"></sendPhoneCode>
                </span>
            </div>
            <mt-button @click="login" size="normal" class="submit-btn">登录</mt-button>
        </div>

        <!-- 获取区号 -->
        <transition name="fade" mode="out-in">
            <div v-if="areaPage">
                <areaCode @getAreaPage="getAreaPage" @getPhoneArea="getPhoneArea"></areaCode>
            </div>
        </transition>
    </div>
</template>
<script>
import baseJs from "../../assets/js/base";
import sendPhoneCode from "../../components/getPhoneCode";
import areaCode from "../../components/areaCode";
import { Toast } from "mint-ui";
export default {
    data() {
        return {          
            phoneArea: "86",// 手机区号          
            areaPage: false, //显示区号页     
            chooseType: "1", //登录方式状态切换
            accountType: "",//登录
            // 获取账号登录
            passwordLogin: {
                accounts: "13277982033",
                password: "123456"
                // accounts: "",
                // password: ""
            },
            //获取手机验证码登录
            securityCode: {
                accounts: "",
                code: ""
            }
        };
    },
    components: {
        sendPhoneCode,
        areaCode
    },
    created() {},
    methods: {
        //关闭获取区号页
        getAreaPage(status) {
            this.areaPage = status;
        },
        //获取手机区号
        getPhoneArea(areaNum) {
            this.phoneArea = areaNum;
            console.log(this.phoneArea, 999);
        },
        //获取验证码
        getCodeFather() {
            this.$refs.childCode.getCodeChild();
        },
        login() {    
            if(this.chooseType == 1){
                var accountCategory = baseJs.checkPhoneNumOrEmailNum(this.passwordLogin,0)
                console.log(accountCategory,111)
                if(accountCategory == 'email'){
                        this.accountType = 3;
                        var params = {
                            mailbox: this.passwordLogin.accounts,
                            password: this.passwordLogin.password,
                            type: this.accountType
                        };
                        this.loginPort(params);
                }else if(accountCategory == 'phone'){
                        this.accountType = 0;
                        var params = {
                            phoneNo: this.passwordLogin.accounts,
                            password: this.passwordLogin.password,
                            type: this.accountType
                        };
                        this.loginPort(params);
                }
            }else if(this.chooseType == 2){
                var accountCategory = baseJs.checkPhoneNumOrEmailNum(this.securityCode,1)
                console.log(accountCategory,222)
                if(accountCategory == 'phone'){
                    this.accountType = 1;
                    var params = {
                        phoneNo: this.securityCode.accounts,
                        verificationCode: this.securityCode.code,
                        type: this.accountType
                    };
                    this.loginPort(params);
                }
            }
        },
        loginPort(params) {
            this.$axios.post(this.address.login, params).then(res => {
                if (res.data.code == 200) {
                    Toast({ message: "登录成功" });
                    this.$store.commit(
                        "getUserMsg",
                        JSON.stringify(res.data.data)
                    );
                    this.$router.push({ name: "home" });
                    this.passwordLogin.accounts = this.passwordLogin.password = this.securityCode.accounts = this.securityCode.code = ''
                } else {
                    Toast({ message: res.data.msg });
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.chooseNow {
    color: @blueColor5;
    border-bottom: 2px solid @blueColor10 !important;
}
.choose-type {
    .flexStartCenter();
    font-size: 14px;
    font-weight: bold;
    color: @blackColor5;
    padding: 0 15px;
    span {
        display: inline-block;
        width: 50%;
        text-align: center;
        padding: 10px 0;
        border-bottom: 2px solid @blackColor3;
    }
}
.forget {
    .flexBetweenCenter();
    font-size: 14px;
    color: @blueColor10;
    span:nth-child(2) {
        color: @blackColor5;
    }
}
.submit-btn {
    margin: 30px 0;
}
.login-password {
    padding: 15px;
    .write-line {
        padding: 20px 0;
        border-bottom: 1px solid @blackColor1;
        .flexBetweenCenter();
        > input {
            border: none;
            font-size: 13px;
            color: @blackColor5;
            width: 60%;
        }
        > img {
            width: 20px;
        }
        > span {
            display: inline-block;
            width: 30%;
            font-size: 15px;
            color: @blueColor5;
            text-align: center;
            font-weight: bold;
            border-left: 1px solid @blackColor1;
        }
    }
}
</style>
